<template>
	<view class="couponList u-skeleton">
		<Skeleton el-color="#efefef" bg-color="#fff" :loading="loading && isFirstComeIn" :animation="true" />
		<template v-if="couponList.length>0">
			<view class="history-list">
				<view class="history-content" v-for="(item, index) in couponList" :key="index">
					<view class="withdraw-detail flex-items flex-sp-between">
						<view class="detail-top">
							<view class="detail-bottom">
								<label class="status fs28 font-color-333">{{item.createTime}}</label>
							</view>
							<view>
								<label class="cardnum fs24 font-color-999">{{item.bak}}</label>
							</view>
						</view>
						<view>
							<label class="apply-balance">{{item.amount}}</label>
						</view>
					</view>
				</view>
			</view>
			<!-- 触底 -->
			<view class="reachBottom" v-if="topLeft > 400 && couponList.length>0">
				<image class="reach-icon" :src="`${VUE_APP_STATIC_URL}static/img/reachBottom.png`" mode="widthFix">
				</image>
				<text class="reach-text">这里到底了哦~~</text>
			</view>
		</template>
		<Empty :show="couponList.length<=0" />
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app";
	import Skeleton from "../../components/Skeleton";
	import Empty from "../../components/Empty";
	import {
		request
	} from "../../utils/request"
	import API from "@/config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";

	const loading = ref(false)
	const isFirstComeIn = ref(true)
	const couponList = ref([{}, {}, {}, {}, {}, {}])
	const page = ref(1)
	const pageSize = ref(20)
	const loadingType = ref(0)
	const topLeft = ref(0)
	const queryParam = ref({
		pageNum: 1,
		pageSize: 20,
		condition: {
			curType: 8
		}
	})

	onLoad(() => {
		getCouponList()
	})

	onReachBottom(() => {
		if (loadingType.value == 1) {
			uni.stopPullDownRefresh()
		} else {
			queryParam.value.pageNum=queryParam.value.pageNum+1
			getCouponList()
		}
	})

	onPageScroll((e) => {
		topLeft.value = e.scrollTop
	})

	/**
	 * 获取券列表
	 * @returns {Promise<void>}
	 */
	const getCouponList = async () => {
		loading.value = true
		try {
			const res = await request(API.queryAccountFlowList, queryParam.value, 'POST')
			if (res.data.list.length === 0) {
				loadingType.value = 1
			} else {
				couponList.value = couponList.value.concat(res.data.list)
			}
			couponList.value = couponList.value.filter(item => JSON.stringify(item) !== '{}')
			loading.value = false
			isFirstComeIn.value = false
		} catch (err) {
			throw Error(err)
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../style/images";

	page {
		background: #F8F8F8 !important;
		margin-top: 14rpx;
		.history-list {
			background: white;
			padding: 30rpx 30rpx 30rpx 30rpx;

			.history-label {
				height: 92rpx;
				line-height: 92rpx;
			}

			.history-content {
				width: 100%;
				border-top: 2rpx solid #F3F4F5;

				.withdraw-detail {
					height: 150rpx;

					.apply-balance {
						width: 160rpx;
						height: 58rpx;
						line-height: 58rpx;
						font-size: 24rpx;
						background: #EEEEEE;
						display: block;
						text-align: center;
						color: #999999;
					}
				}
			}
		}

	}

	// 触底样式
	.reachBottom {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.reach-icon {
			width: 150rpx;
			height: 150rpx;
		}

		.reach-text {
			margin: 20rpx 0;
			color: #CCCCCC;
		}
	}
</style>